<template>
  <el-drawer title="物流信息" v-model="dialogVisible" size="40%">
    <el-card shadow="never" class="border-0 mb-3">
      <div class="flex items-center">
        <el-image
          :src="info.logo"
          fit="fill"
          :lazy="true"
          style="width: 60px; height: 60px"
          class="rounded border"
        ></el-image>
        <div class="ml-3">
          <p>物流公司：{{ info.typename }}</p>
          <p>物流单号：{{ info.number }}</p>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="border-0 border-t">
      <el-timeline class="ml-[-40px]">
        <el-timeline-item
          :timestamp="item.time"
          placement="top"
          v-for="(item, index) in info.list"
          :key="index"
        >
          {{ item.status }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref } from "vue";
import { getShipInfo } from "~/api/order";
import { toast } from "../../composables/util";
const dialogVisible = ref(false);

const info = ref({});
const open = (id) => {
  return getShipInfo(id).then((res) => {
    if (res.status != 0) {
      return toast(res.msg, "error");
    }
    info.value = res.result;
    console.log(res.result);
    dialogVisible.value = true;
  });
};

defineExpose({
  open,
});
</script>